Mobile App Development Application-wide State Management এর উদাহরণ গাইড ও নোট

State Management অ্যাপ্লিকেশনের মধ্যে ডেটার পরিবর্তন এবং সেগুলোর ট্র্যাকিং করা, বিশেষত যখন সেই ডেটা অ্যাপের বিভিন্ন কম্পোনেন্টের মধ্যে শেয়ার করা হয়। Angular এ Application-wide state management অনেক কার্যকরী হতে পারে যখন অ্যাপের ডেটা বিভিন্ন কম্পোনেন্টে শেয়ার করতে হয়।

এখানে NgRx এবং Service-based State Management সহ দুটি পদ্ধতির উদাহরণ দেওয়া হলো:

১. Service-based State Management

Angular অ্যাপে সহজ State Management এর জন্য আপনি একটি Service ব্যবহার করতে পারেন। এই পদ্ধতিতে, আপনি অ্যাপের ডেটা একটি সিঙ্গেল সার্ভিসে ম্যানেজ করবেন এবং সেই সার্ভিসটিকে প্রয়োজনীয় কম্পোনেন্টে ইনজেক্ট করবেন।

১.১ State Service তৈরি করা

প্রথমে একটি state.service.ts ফাইল তৈরি করুন যেখানে আপনার অ্যাপ্লিকেশনের স্টেট সংরক্ষিত থাকবে।

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class StateService {
  private counterSubject = new BehaviorSubject<number>(0);
  counter$ = this.counterSubject.asObservable();

  increment() {
    this.counterSubject.next(this.counterSubject.value + 1);
  }

  decrement() {
    this.counterSubject.next(this.counterSubject.value - 1);
  }
}

• BehaviorSubject: এটি একটি RxJS সাবজেক্ট যা একটি ইনিশিয়াল ভ্যালু দিয়ে শুরু হয় এবং সাবস্ক্রাইবারদের অ্যাপ্লিকেশনের স্টেটের বর্তমান মান সরবরাহ করে।

১.২ কম্পোনেন্টে সার্ভিস ব্যবহার করা

এখন আপনার কম্পোনেন্টে StateService ইনজেক্ট করে স্টেট ম্যানেজমেন্ট করতে পারবেন।

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss'],
})
export class CounterComponent {
  counter$ = this.stateService.counter$;

  constructor(private stateService: StateService) {}

  increment() {
    this.stateService.increment();
  }

  decrement() {
    this.stateService.decrement();
  }
}

১.৩ HTML টেমপ্লেট

<ion-content>
  <ion-button (click)="increment()">Increment</ion-button>
  <ion-button (click)="decrement()">Decrement</ion-button>
  <p>Counter: {{ counter$ | async }}</p>
</ion-content>

• counter$ | async: async পাইপ ব্যবহার করে আমরা counter$ Observable এর মান পেতে পারি এবং UI-তে দেখাতে পারি।

২. NgRx State Management

NgRx হলো একটি জনপ্রিয় State Management লাইব্রেরি যা Angular অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টের জন্য ব্যবহার করা হয়। এটি Redux থেকে অনুপ্রাণিত এবং এতে Store, Actions, Reducers, এবং Effects থাকে যা অ্যাপ্লিকেশনের স্টেট পরিচালনা করতে ব্যবহৃত হয়।

২.১ NgRx Setup

প্রথমে, NgRx ইনস্টল করতে হবে:

ng add @ngrx/store

২.২ State মডিউল তৈরি করা

counter.reducer.ts ফাইল তৈরি করুন:

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

export function counterReducer(state: number | undefined, action: any) {
  return _counterReducer(state, action);
}

২.৩ Actions তৈরি করা

counter.actions.ts ফাইল তৈরি করুন:

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

২.৪ Store সেটআপ করা

app.module.ts ফাইলে NgRx Store সেটআপ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

২.৫ কম্পোনেন্টে Store ব্যবহার করা

counter.component.ts ফাইলে Store এর মাধ্যমে স্টেট ব্যবহারের উদাহরণ:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss'],
})
export class CounterComponent {
  counter$ = this.store.select('counter');

  constructor(private store: Store<{ counter: number }>) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

২.৬ HTML টেমপ্লেট

<ion-content>
  <ion-button (click)="increment()">Increment</ion-button>
  <ion-button (click)="decrement()">Decrement</ion-button>
  <p>Counter: {{ counter$ | async }}</p>
</ion-content>

উপসংহার

• Service-based State Management: সহজ এবং ছোট অ্যাপ্লিকেশনের জন্য ভালো, যেখানে স্টেট সাধারণত একক সার্ভিসের মাধ্যমে শেয়ার করা হয়।
• NgRx State Management: বড় এবং স্কেলেবল অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত যেখানে একাধিক অ্যাকশন, রিডিউসার, এবং সাইড এফেক্টস ব্যবহৃত হয়।

উপরোক্ত পদ্ধতিগুলির মাধ্যমে আপনি অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট করতে পারেন এবং বিভিন্ন কম্পোনেন্টে সেই স্টেট শেয়ার করতে পারবেন।